<template>
  <el-card class="role-card">
	  
	  <el-select v-model="value1" filterable placeholder="请选择" style="margin-left: 70px;">
	      <el-option
	        v-for="item in deptOption"
	        :label="item.deptName"
	        :value="item.id"
			>
	      </el-option>
	    </el-select>
	  
	  
    <div class="home-box">
      <el-table
            :data="tableData"
            border
            style="width: 90%; margin: 20px auto;border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
            :header-cell-style="{
                'background': '#337ecc !important',
                'color': '#ffffff',
                'border': 'none !important'
              }">
          
      		<el-table-column prop="deptName" label="部门名称" ></el-table-column>
			<el-table-column prop="createTime" label="年度月份" width="130" />
      		<el-table-column prop="scoreWage" label="评分绩效" width="130" />
      	  <el-table-column prop="pieceWage" label="计件绩效" width="130" ></el-table-column>
      	  <el-table-column prop="kpiWage" label="提成绩效" width="130"></el-table-column>
      	  <el-table-column prop="okrWage" label="OKR绩效" width="130"></el-table-column>
      	  <el-table-column prop="rewardWage" label="特殊绩效" width="130"/>
      	  <el-table-column prop="partTimeRewardWage" label="兼职绩效" width="130" />
      	  <el-table-column prop="total" label="总计" width="130" />
      	
      	
        </el-table>
    </div>
  </el-card>
</template>
<script setup>
import { ref, onMounted,watch ,onBeforeMount, reactive, getCurrentInstance} from "vue";
import eventBus from "@/utils/event-bus";
import { getDeptTreeOne,getAllDept } from "@/api/report";

const showSearch = ref(true);
const tableData = ref([]);
const selection = ref([]);
const loading = ref(false);



onBeforeMount(() => {
    getDeptTreeA();
	getAllDeptA();
});

/**
 * 获取部门列表
 */
const getDeptTreeA = () => {
	var deptId = value1.value
	if(value1.value == null)
		deptId = 1
	
	getDeptTreeOne({deptId}).then((data) => {
	  tableData.value = data.data
	});
	
  // loading.value = false;
};



const now = new Date();
const year = now.getFullYear();
// 获取当前月份（注意：月份从0开始，所以需要加1）
const month = now.getMonth() == 0? 12:now.getMonth()+1;
// 格式化为 YYYY-MM 形式
const yearMonth = `${year}-${month < 10 ? '0' : ''}${month}`;

var value2 = ref(yearMonth);
var value1 = ref();


watch(value1, (newValue, oldValue) => {
	getDeptTreeA();
}, { deep: true });

const check = (time)=>{
	
	 return time.getTime() > new Date(new Date().toLocaleDateString()).getTime();

}

const deptOption = ref([]);
const getAllDeptA = () => {
	getAllDept().then(data=>{
	      for (let i = 0; i < data.length; i++) {
	        deptOption.value.push({
	          deptName: data[i].deptName,
	          id: String(data[i].id)
	        })
	    }
		deptOption.value.push({
		  deptName: "主战部门",
		  id: 777
		})
		deptOption.value.push({
		  deptName: "主建部门",
		  id: 888
		})
		deptOption.value.push({
		  deptName: "职能部门",
		  id: 999
		})
		
	})
};




</script>

<style lang="scss" scoped>
.home-box {
  .header {
    margin-bottom: 22px;
    text-align: right;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
.el-card {
  border-radius: 10px;
}

.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
